<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            1. 视口就是浏览器显示页面内容的屏幕区域，视口分为布局视口、视觉视口和理想视口
                - 布局视口是早期用于解决在手机浏览PC端网站的问题的。固定视口分辨率为980px，所以当时大多数的网站都可以在手机上呈现，只不过元素看上去会很小，只能通过手动放大来查看。
                - 视觉视口(visual viewport)可以做到只把布局视口的一部分展示在手机上，用户想要查看剩余部分手动拖拽即可。这样的话就做到了元素不会显示的特别小，但是用户频繁的拖动也会十分影响体验，所以，有没有一种方法，既能显示所有的内容，又不会显示元素很小呢？答案是有的，那就是理想视口
                - 理想视口(ideal viewport)，对于设备来说，是最理想的视口尺寸。我们需要手动写meta标签通知浏览器操作。meta视口标签的主要目的就是布局视口的宽度应该和理想视口的宽度一致，简单理解就是设备有多宽，我们的布局视口就有多宽
        */ 
    </script>
</body>
</html>